<docs>
  ##
</docs>
<template>
  <div
    class="index"
    ref="index"
    :style="{ minHeight: winHeight }"
    @click="hideCMenu"
  >
    <router-view></router-view>
    <!-- bar 功能导航 -->
    <div class="bar_wrap">
      <div class="item" @click.stop="toggleCMenu">
        <span class="job"></span>
        <p>职位</p>
        <transition name="fade">
          <ul class="zw_list" v-show="showLst">
            <li class="zw_lsitem" @click="link(1)">职位搜索</li>
            <li class="zw_lsitem" @click="link(8)">移动传媒</li>
          </ul>
        </transition>
      </div>
      <div class="item" @click="link(2)">
        <span class="resume"></span>
        <p>测评</p>
      </div>
      <div class="item" @click="link(3)">
        <span class="user"></span>
        <p>我的</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      winHeight: "",
      showLst: false,
    };
  },
  methods: {
    hideCMenu() {
      this.showLst = false;
    },
    toggleCMenu() {
      this.showLst = !this.showLst;
    },
    link(n) {
      if (n == 1) {
        this.$router.push({ name: "newSearch" });
        return;
      } else if (n == 8) {
        this.$router.push({ name: "searchSec" });
        return;
      }
      window.location.href = "./public" + n + ".html";
      // this.$http.get('/grgl/sfdl').then(res=>{
      //   this.$router.push({name:'testindex'})
      // })
    },
  },
  mounted() {
    // fix mobile height
    const eleHeight = this.$refs.index.offsetHeight || 0;
    const windowHeight = this.$store.state.winHeight;
    this.winHeight = `${Math.max(windowHeight, eleHeight)}px`;
  },
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.index {
  box-sizing: border-box;
  padding-bottom: 122px;
  .bar_wrap {
    background: linear-gradient(160deg, #1d66d4, #00baff);
    display: flex;
    width: 100vw;
    border-top: 1px solid #fff;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .item {
      flex: 1;
      text-align: center;
      box-sizing: border-box;
      padding: $font-size-mini 0;
      font-size: $font-size-large;
      position: relative;
      color: $color-white;
      transition: $transition;
    }
    .zw_list {
      position: absolute;
      bottom: 100%;
      left: 5%;
      right: 5%;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20px;
        margin: auto;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
      }
    }
    .zw_lsitem {
      line-height: 68px;
      text-align: center;
      // font-size: 20px;
      color: $color-text-primary;
      border-bottom: $border;
      border-radius: 8px 8px 0 0;
      &:last-child {
        border-radius: 0 0 8px 8px;
        border-bottom: none;
      }
    }
    span {
      display: inline-block;
      height: $radius-base4;
      width: $radius-base4;
      margin-bottom: $padding-base-half;
    }

    .job {
      background: url("~common/images/job.png") 0 0 no-repeat;
      background-size: 40px;
    }

    .resume {
      background: url("~common/images/resume.png") 0 0 no-repeat;
      background-size: 40px;
    }

    .user {
      background: url("~common/images/user.png") 0 0 no-repeat;
      background-size: 40px;
    }
  }
}
</style>
